<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <hr/>
    <h2>动态展示列表</h2>
    <div id="test3"></div>
    <script src="../react-lib/babel.min.js"></script>
    <script src="../react-lib/react.development.js"></script>
    <script src="../react-lib/react-dom.development.js"></script>
    <script type="text/babel">
        const msg1 = 'React'
        const msg2 = 'JXS'

        const vDom1 = React.createElement('h1',{id:msg1.toLowerCase()},msg1.toUpperCase())
        ReactDOM.render(vDom1,document.getElementById('test1'))

        const vDom2 = <h3 id={msg2.toUpperCase()}>{msg2.toLowerCase()}</h3>
        ReactDOM.render(vDom2,document.getElementById('test2'))

        // ============动态展示列表================
        const names = ['sf','vue','react','springboot']

        const vDom3 = (
        <ul>
            {
                // 数组的map方法
                names.map((name,index) => <li key={index}>{name}</li>)
            }
        </ul>
        )
        ReactDOM.render(vDom3,document.getElementById('test3'))

    </script>
</body>
</html>